<script setup lang="ts">
import { ref, watch, onMounted, onActivated } from "vue";
import { useECharts } from "@pureadmin/utils";
import { chartInfo } from "../interface";

const props = withDefaults(defineProps<chartInfo>(), {
  title: "响应时间(s)", // 图表名称
  legend: () => ["Email", "Union Ads"], // 图例名称
  xAxisName: "时序", // x轴名称
  xAxisData: () => ["20", "80", "120", "160"], // x轴数据设置
  yAxisSetting: () => ({}), // y轴属性设置
  seriesData: () => [
    {
      name: "Email", // 与图例相同
      data: [1.7, 1.5, 2.1, 1.8] // 数据点
    },
    {
      name: "Union Ads",
      data: [2.1, 2.3, 1.6, 1.85]
    }
  ]
});

const chartRef = ref<any>();

const { resize, getInstance } = useECharts(chartRef, {});
onMounted(() => {
  render();
});

const render = () => {
  getInstance().setOption({
    color: ["rgb(12, 120, 225)", "rgb(255, 153, 0)"],
    title: {
      text: props.title,
      top: "5%",
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      right: "15%",
      data: props.legend,
      icon: "roundRect",
      top: "5%",
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      top: "20%",
      left: "0%",
      right: "10%",
      bottom: "10%",
      containLabel: true
    },
    toolbox: {
      feature: {}
    },
    xAxis: {
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 15 // 调整刻度标签和坐标轴名称之间的间距
      },
      name: props.xAxisName,
      nameTextStyle: {
        color: "#303133",
        fontSize: 14,
        padding: [35, 0, 0, -45],
        verticalAlign: "top"
      },
      type: "category",
      boundaryGap: true,
      data: props.xAxisData
    },
    yAxis: {
      type: "value",
      ...props.yAxisSetting
    },
    series: [
      {
        name: props.seriesData[0]["name"],
        type: "line",
        data: props.seriesData[0]["data"],
        symbol: "none", // 设置标记点形状为无
        showSymbol: false, // 不显示标记点
        lineStyle: {
          shadowBlur: 5,
          shadowColor: "rgba(12, 120, 225, 0.5)",
          shadowOffsetY: 3
        }
      },
      {
        name: props.seriesData[1]["name"],
        type: "line",
        data: props.seriesData[1]["data"],
        symbol: "none", // 设置标记点形状为无
        showSymbol: false, // 不显示标记点
        lineStyle: {
          shadowBlur: 5,
          shadowColor: "rgba(255, 153, 0, 0.5)",
          shadowOffsetY: 3
        }
      }
    ]
  });
};

watch(props, newProps => {
  render();
},{ deep: true });

onActivated(() => {
  resize();
});
</script>

<template>
  <div ref="chartRef" style="width: 100%" />
</template>
